<!-- components/Header.vue -->
<template>
  <header class="fixed top-0 left-0 right-0 bg-white z-50 border-b border-gray-medium">
    <div class="container mx-auto px-4 h-16 flex items-center justify-between">
      <!-- Logo -->
      <div class="flex items-center">
        <h1 class="text-primary text-2xl font-bold">初源</h1>
      </div>
      
      <!-- 搜索框 -->
      <div class="hidden md:flex relative flex-1 max-w-md mx-4">
        <input 
          type="text" 
          placeholder="搜索" 
          class="w-full py-2 px-4 pr-10 rounded-full bg-gray-light focus:outline-none focus:ring-2 focus:ring-primary/30"
        >
        <i class="fa fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-dark"></i>
      </div>
      
      <!-- 右侧功能区 -->
      <div class="flex items-center space-x-4">
        <button class="w-8 h-8 flex items-center justify-center text-gray-700 hover:text-primary transition-colors">
          <i class="fa fa-paper-plane-o text-xl"></i>
        </button>
        <div class="w-8 h-8 rounded-full overflow-hidden">
          <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-full h-full object-cover">
        </div>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header'
}
</script>